/* CSS Document */
/*顶部菜单*/
.header_top{width:100%; height:36px; line-height: 36px; background-color:#f2f2f2; color:#666;}

/*导航*/
.Menu{height: 100px;}
.Menu .navbar-toggle{display: none;}
.Menu .nav-logo{width:291px; float:left; margin-top: 25px;}
.Menu .navbar{float:right; line-height: 100px; font-size: 16px;}
.Menu .navbar ul li{
	float:left; 
	width: 120px;
	text-align: center;
	 display: inline-block;                                           
  vertical-align: middle;
 /* -webkit-transform: translateZ(0);
    -o-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);*/
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
    -o-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
    -ms-osx-font-smoothing: grayscale;
        -o-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
    -o-transition-property: color;
  -moz-transition-property: color;
  -ms-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.Menu .navbar ul li:before{
	content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: -webkit-linear-gradient(top,#0099d6,#0076a5) no-repeat;
  -webkit-transform: scaleY(0);
    -o-transform: scaleY(0);
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 0;
    -o-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition-property: transform;
    -o-transition-property: transform;
  -moz-transition-property: transform;
  -ms-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
      -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
        -o-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -ms-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.Menu .navbar ul li:hover:before{-webkit-transform: scaleY(1);transform: scaleY(1);}
.Menu .navbar ul li:hover a{color: #fff; display: block;}
.Menu .navbar ul li.active{  background: -webkit-linear-gradient(top,#0099d6,#0076a5) no-repeat;}
.Menu .navbar ul li.active a{color:#fff}产品中心
.Menu .navbar ul li ul{display: none;}
.Menu .navbar ul li.dropdown{}
.Menu .navbar ul li.dropdown ul{position:absolute; left:0; top:100%; display: none; background: -webkit-linear-gradient(top,#0099d6,#0076a5) no-repeat;; z-index:122}
.Menu .navbar ul li.dropdown ul li{line-height: 36px; font-size: 14px;}
.Menu .navbar ul li.dropdown ul li:hover{color:#231815; background-color: #fff;}
.Menu .navbar ul li.dropdown ul li:hover a{color:#231815;}
.Menu .navbar ul li.dropdown:hover > ul{display: block;}

.phonemeng{position: absolute; top: 106px; left: 0; width: 100%; height: 100%; background-color: #000; opacity: .6; z-index: 196; display: none;}
.phonemeng.active{display: block;}
.Menu .navbar .img1,.Menu .navbar .img2{display: none;}



@media (max-width: 992px) {
	.Menu{height: 70px; border-bottom: 1px solid #e6e6e6}
	.Menu .navbar-toggle{display:block; float:right; height:33px; margin-top:20px;}
	.Menu .nav-logo{margin:10px auto; float:none;}
	.icon-bar{width:30px;height:4px;}
	.icon-bar{width:30px;float:left;}
	.icon-bar p{width:100%;height:4px;background:#333;margin-bottom:7px;}
	.icon-bar p:last-child{margin-bottom:0;}
	.Menu .navbar{display: none; position: absolute; top: 106px; left: 0; width: 100%; background-color: #fff; display: none; z-index: 198; padding-bottom: 38px;}
	.Menu .navbar ul li{width:100%; border-bottom: 1px solid #e6e6e6;}
	.Menu .navbar ul li .downimg{width:80%; margin:0 auto;}
	.Menu .navbar ul li a{width:80%; float:left; line-height: 53px; margin-left: 10%;}
	.Menu .navbar .img1,.Menu .navbar .img2{display: block; float: right; margin-top: 26px; max-width: 100%;}
	.Menu .navbar .img2{display: none;}
	.Menu .navbar ul li.active{background-color: #fff;}
	.Menu .navbar ul li.active a{color:#333}
	.Menu .navbar li.active .img1, .Menu .navbar li.active .ul2 .img2{display: none;}
	.Menu .navbar li.active .img2, .Menu .navbar li.active .ul2 .img1{display: block;}
	.Menu .navbar ul li .ul2 li,.Menu .navbar ul li.active .ul2 li{background-color: #ccc}
	.Menu .navbar ul li .ul2 li{width:100%;}

}

@media (max-width: 480px) {
	.Menu .nav-logo{margin:15px 0px; float:none; width:240px;}
}

.boxtitle{height: 100px; text-align: center;  position: relative; margin-bottom: 20px; padding-top: 20px;}
.boxtitle span {height: 26px; line-height: 26px; font-weight: normal; text-transform: uppercase; display: block;}
.boxtitle strong {height: 52px; line-height: 52px; font-size: 28px; font-weight: normal;}
.line {width: 41px; bottom: 0px; position: absolute; font-size: 0; line-height: 0; overflow: hidden; left: 50%; margin-left: -20px; border-bottom: 2px solid #0099d6; content: "";}

/*产品牌列表*/
.product{}
.product img{max-width: 100%; margin: 0 auto;
    display: block;}

.product .productborder{width:90%; margin:0px auto 20px; border:2px solid #e0dedb; position:relative;}
.product .productborder::before,.product .productborder::after {content:'';border:2px solid transparent;width:0;height:0;position:absolute;}
.product .productborder::before {top:-2px;left:-2px;}
.product .productborder::after{right:-2px;bottom:-2px;}
.product .productborder:hover::before,.product .productborder:hover::after{width:100%;height:100%;}
.product .productborder:hover::before {border-top-color:#0099d6;border-right-color:#0099d6;-webkit-transition:width 0.25s ease-out, height 0.25s ease-out 0.25s;transition:width 0.25s ease-out, height 0.25s ease-out 0.25s;}
.product .productborder:hover::after {border-bottom-color:#0099d6;border-left-color:#0099d6;-webkit-transition:border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;transition:border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;} 
.product .productborder a{cursor:pointer; display: block; position: relative; z-index: 1;}

.product .proimg{width:100%; margin-top: 10px;}
.product .proimg img{display: block; margin:0 auto;}
.product .protit{width:100%; text-align:center; height: 60px; line-height: 19px; position: relative; font-size: 14px; padding-top: 27px; background-color: transparent; overflow: hidden; }
.product .protit:before{left: 50%;}
.product .protit:after{right: 50%;}
.product .protit:before, .product .protit:after{content: ''; width: 0; height: 100%; opacity: 0; position: absolute; top: 0; z-index: -1;   -webkit-transition: all 0.3s; transition: all 0.3s;}
.product .protit:before, .product .protit:after {background: -webkit-linear-gradient(top,#0099d6,#0076a5) no-repeat;}
.product .productborder:hover .protit:before,.product .productborder:hover .protit:after{width: 50%;opacity: 1;}
.product .productborder:hover .protit {color: #fff;}
.product .protit:hover {border-color: #d8261c;}
.product .protit .line{bottom: 20px; }
.product .productborder:hover .protit .line{transition: all 0.6s; width:100px; margin-left:-50px;}


.product .honortit{width:100%; text-align:center; height: 40px; line-height: 19px; position: relative; font-size: 14px; padding-top: 27px; background-color: transparent; overflow: hidden; }
.product .honortit:before{left: 50%;}
.product .honortit:after{right: 50%;}
.product .honortit:before, .product .honortit:after{content: ''; width: 0; height: 100%; opacity: 0; position: absolute; top: 0; z-index: -1;   -webkit-transition: all 0.3s; transition: all 0.3s;}
.product .honortit:before, .product .honortit:after {background: -webkit-linear-gradient(top,#0099d6,#0076a5) no-repeat;}
.product .productborder:hover .honortit:before,.product .productborder:hover .honortit:after{width: 50%;opacity: 1;}
.product .productborder:hover .honortit {color: #fff;}
.product .honortit:hover {border-color: #d8261c;}
.product .honortit .line{bottom: 20px; }
.product .productborder:hover .honortit .line{transition: all 0.6s; width:100px; margin-left:-50px;}



.move{-webkit-transition:all 1s ease-out 0s;-moz-transition:all 1s ease-out 0s;-ms-transition:all 1s ease-out 0s;-o-transition:all 1s ease-out 0s;transition:all 1s ease-out 0s;opacity:0;transform:translateY(60px);-ms-transform:translateY(60px);-moz-transform:translateY(60px);-webkit-transform:translateY(60px);-o-transform:translateY(60px);}
.moveUp{opacity:1;transform:translateY(0);-ms-transform:translateY(0);-moz-transform:translateY(0);-webkit-transform:translateY(0);-o-transform:translateY(0);}

@media (max-width: 480px) {
  .boxtitle{height: 70px;}
  .boxtitle strong{font-size:20px; height: 30px; line-height: 30px;}
	.product{width:50%;}
	.product .productborder{width:90%;}
  .product .protit{padding-top: 5px; height: 30px;}
  .product .protit .line{bottom: 5px}
}

.box-about{width:100%;
	background:url(../images/abb.jpg);
	margin-top:10px; padding-bottom: 20px;}
.box-about .boxtitle{color:#fff;}
.box-about .aimg img{max-width:90%;}
.box-about .about{line-height: 30px; color:#fff;}
.box-about .about p{text-indent: 2em;line-height: 50px;}

.more{width:90px; height: 30px; border:1px solid #fff; border-radius:5px; text-align: center; margin-top:10px; background-color: transparent; overflow: hidden;}
.more a{color:#fff}
.more:hover{background-color: #0099d6;}
.more:hover a{color:#fff;}

@media (max-width: 480px) {
	.box-about .aimg{width:100%; float:none;}
	.box-about .aimg img{max-width:50%;     display: block;
    margin: 0 auto;}
	.box-about .about{width:100%; float:none;}

}



.boxshebei{ overflow:hidden; margin-top:40px; padding-top:10px;}
.boxshebei .shebeiborder {
    width:100%; float:left;
}
.boxshebei .shebeiborder a{
  display:block;
  width:100%;
  
  margin:auto;
  text-align:center;
  background-color:#fff;
  position:relative;
}
.boxshebei .shebeiborder .img{width:90%;overflow:hidden; margin:5%;}
.boxshebei .shebeiborder .img img{width:100%; display: block}
.boxshebei .shebeiborder::before {top:-2px;left:-2px;}
.boxshebei .shebeiborder::after{right:-2px;bottom:-2px;}
.boxshebei .shebeiborder::before,.boxshebei .shebeiborder::after { opacity: 0; position: absolute; width: 100%; height: 100%; top: 0; left:0; }
.boxshebei .shebeiborder::before { border-top: 1px solid #0099d6; border-bottom: 1px solid #0099d6; transform: scale(0, 1); -webkit-transform: scale(0,1); }
.boxshebei .shebeiborder::after { border-left: 1px solid #0099d6; border-right: 1px solid #0099d6; transform: scale(1, 0); -webkit-transform: scale(1,0); }
.boxshebei .shebeiborder::before,.boxshebei .shebeiborder::after { transition: opacity 0.35s ease 0s, transform 0.35s ease 0s; content: ''; box-sizing: border-box; }
.boxshebei .shebeiborder:hover::before,.boxshebei .shebeiborder:hover::after { opacity: 1; transform: scale(1); -webkit-transform: scale(1); }
@media (max-width: 480px) {
  .boxshebei{margin-top: 0px;}
  .shebei{width:50%;}
}

.newslist{margin-top: 20px;}
.newsRlist{width:95%; float:right; margin-bottom: 10px; border-bottom: 1px dashed #ccc}
.newsRlistL{width:20%; float:left;}
.newsRlistR{width:75%; float:right;}
.newsRlist a .tit { display: block; font-size: 16px; color: #333; padding: 0px 0 10px 0; transition: all 0.35s;}
.newsRlist a .txt { display: block; font-size: 13px; line-height: 180%;  color: #999;}
.newsRlist a:hover .tit, .newsRlist a:active .tit { color: #0099d6;}
@media (max-width: 768px) {
  .newsL{width:100%;}
  .newsR{width:100%;}
  .newsRlist{width:100%;}

}
@media (max-width: 480px) {
  .newsL{width:100%;}
  .newsR{width:100%;}
  .newsRlist{width:100%;}
  .newsRlistL{display: none;}
  .newsRlistR{width:100%;}
}

.footer{background-color: #f5f5f5; min-height: 50px; text-align: center; color:#333;}
.foot{margin:20px auto; text-align: center; width:650px; color:#fff;}
.foot ul li{float:left; padding: 0px 20px}
.foot ul li a{color:#333;}
.footer p{display: block; margin-bottom: 20px;}

@media (max-width: 640px) {
  .foot{width:100%; display: none;}
  .footer p{margin-top: 20px;}
}

.company-intro {
  line-height: 50px; font-size: 16px; margin-bottom: 30px;
}
.company-intro p{text-indent: 2em;}
@media(max-width:992px){
  .company-intro{width:96%; margin:0 auto;}
}
@media(max-width:640px){
  .company-intro{width:96%; margin:0 auto;}
  .box-w-2{width:96%; margin:0 auto; float: none;}
}

/*******内页********/
.nr-nav{width:100%; border-bottom: 1px solid #ccc; margin-top: 28px; overflow: hidden; font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif;}
.nr-nav-l{ float:left; margin-bottom:10px}
.nr-nav-cn{ margin-left:5px; font-size:16px}
.nr-nav-en{ font-size:14px; margin-left:10px}
.nr-nav-r{ float:right; font-size:14px}
.nr-nav-r a{ font-size:14px}

.nr-about{line-height:36px; text-indent:32px; text-align:justify; margin-top:10px; margin-bottom:10px; font-size:16px;font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif;}
.nr-about img{max-width: 100%;}

@media only screen and (max-width: 479px){
  .add-margin{margin-top: 50px;}
  .nr-nav-r{display: none;}
}

.newsnr {
  width: 100%;
  margin: 20px auto;
  padding: 0px 0px 50px;
  font-size: 14px;
  line-height: 26px;
  color: #666;
}
.newsnr ul{padding-left:0px;}
.newsnr h1 {
  width: 100%;
  padding: 20px 0;
  border-bottom: 1px solid #E6E6E6;
  color: #222;
  margin: 0px;
  font-size: 22px;
}
.newsnr .hist {
  color: #999;
  padding-top: 20px;
  font-size: 13px;
  font-style: italic;
}
.newsnr .xwnewsnr {
  font-size: 14px;
  line-height: 26px;
  padding-top: 28px;
  word-wrap: break-word;
  word-break: normal;
}
#news li {
  clear: both;
  margin-bottom: 40px;
  height: 160px;
  list-style:none
}
#news li a {
  display: block;
  width: 100%;
  height: 100%;
}
#news li a p.img {
  width: 220px;
  height: 160px;
  float: left;
  overflow: hidden;
  position: relative;
  border-radius: 0 10px 0 10px;
  background: url(images/news_img_bg.png) no-repeat center center;
}
#news li a p.img .img {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  border-radius: 0 10px 0 10px;
}
#news li a p.img .bg {
  position: absolute;
  right: -220px;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: rgba(0,0,0,0.4);
  z-index: 2;
  border-radius: 0 0 0 10px;
  transition: all ease 0.35s;
}
#news li a p.img .zoom {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  z-index: 3;
  transition: all 0.5s;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}
#news li a .con {
  width: 870px;
  height: 159px;
  float: right;
  border-bottom: 1px solid #E6E6E6;
  position: relative;
}
#news li a .ntit {
  display: block;
  font-size: 16px;
  color: #333;
  padding: 10px 0 20px 0;
  transition: all 0.35s;
}
#news li a .txt {
  display: block;
  font-size: 13px;
  line-height: 180%;
  color: #999;
}
#news li a .click {
  font-size: 12px;
  display: block;
  padding-top: 20px;
  color: #BBB;
}
#news li a .click img {
  margin: -2px 0 0 8px;
}
#news li a:hover .tit, #news li a:active .tit {
  color: #D82633;
}
#news li a:hover p.img .bg, #news li a:active p.img .bg {
  right: 0;
}
#news li a:hover p.img .zoom, #news li a:active p.img .zoom {
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
  transform: rotateY(360deg);
  -webkit-transform: rotateY(360deg);
  -moz-transform: rotateY(360deg);
}
#newsback {
  display: inline-block;
  background: #FFF;
  padding: 10px 20px;
  font-size: 13px;
  float: right;
  margin: 2px;
  border-radius: 5px;
  transition: all ease 0.35s;
}
#newsback:hover, #newsback:active {
  color: #D82633;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.08);
}

@media(max-width:1200px){
  #news li a .con{width:700px;}
}
@media(max-width:992px){
  #news li a .con{width:480px;}
  #news li a .txt{max-height: 50px;}
}
@media(max-width:768px){
  .mainny .newsnr{padding-top: 0px;}
  #news li a p.img{display: none;}
  #news li a .con{width:96%; margin:0 auto; float:none;}
  #news li{height: auto;}
  #news li a .con{height:auto;}
  #news li a .txt{max-height: 160px;}
  .newsnr{padding-bottom:10px; width:96%; margin:0 auto;}
  .newsnr ul{padding-left:0px;}
  .newsnr h1{font-size: 16px;}
}
@media(max-width:480px){
  .mainny .newsnr{padding-top: 0px;}
  #news li a p.img{display: none;}
  #news li a .con{width:96%; margin:0 auto; float:none;}
  #news li{height: auto;}
  #news li a .con{height:auto;}
  #news li a .txt{max-height: 160px;}
  .newsnr{padding-bottom:10px;width:96%; margin:0 auto;}
  .newsnr ul{padding-left:0px;}
  .newsnr h1{font-size: 16px;}
}

.newsnr .newspage{
  padding-top: 15px;
  padding-bottom: 15px;

}
.newsnr .newspage span{
  border-bottom: 0px solid #949494;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.newsnr .newspage .span1{
  float: left;
  max-width: 332px;
}
.newsnr .newspage .span2{
  float: right;
  max-width: 291px;
}
.newsnr .newspage span a{
  color: #666;
  font-size: 14px;
  font-family: "微软雅黑";
  text-decoration: none;
}
@media(max-width:480px){
  .newsnr .newspage .span1{float:none;}
  .newsnr .newspage .span2{float:none;}
}


.pagination {
  float:left;
  text-align:center;
  width:100%;
  margin:20px 0;
  position:relative;
  overflow:hidden;}
.page {
  display:inline-block;
  font: 16px/28px "微软雅黑", Tahoma, "宋体";
  *display:inline;
  :1;
  *zoom:1;}
.page span,.page strong {
  float:left;}
.page a,
.page span.disabled {
  background:#FFF;
  border:1px solid #CCC;
  color:#333;
  float:left;
  font: 16px/24px "微软雅黑", Tahoma, "宋体";
  height:28px;
  margin-right:5px;
  min-width:15px;
  padding:4px 8px;
  text-align:center;
  vertical-align:middle;
  white-space:nowrap;
  _width:15px;}

.page strong {
  background:#0099d6;
  border:1px solid #CCC;
  color:#fff;
  float:left;
  font: 16px/24px "微软雅黑", Tahoma, "宋体";
  height:28px;
  margin-right:5px;
  min-width:15px;
  padding:4px 8px;
  text-align:center;
  vertical-align:middle;
  white-space:nowrap;
  _width:15px;}


.page a:hover {
  border:1px solid #0099d6;
  color:#0099d6;
  text-decoration:none;}
.page span.disabled {
  background:#FFF;
  border:1px solid #CCC;
  color:#CCC;}
.page span.ellipsis {
  float:left;
  font: 16px/24px "微软雅黑", Tahoma, "宋体";
  line-height:22x;
  margin-right:5px;}
.page .page_txt {
  line-height:20px;
  float:right;
  width:auto;}
.page a.page-curpage {
  background:#0099d6;
  border:1px solid #0099d6;
  color:#FFF;
  font-weight:bold;}
.page input {
  font: 14px Verdana;
  padding:0 0 0 1px;
  width:40px;
  height:14px;}


.containerp {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .containerp {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .containerp {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .containerp {
    width: 1170px;
  }
}

@media(max-width:992px){
  .product{width:33.3333333%; float:left;}
}
@media(max-width:768px){
  .product{width:50%;}
}
@media(max-width:480px){
  .product{width:50%;}
}

.nr-product .tit-wz{ clear: both; line-height: 50px; text-align: center; font-size: 24px; font-weight: 700; color: #333;}
.nr-product .tit-wz span{width:100%; height: 1px; background-color: #999; display: block; margin:10px 0px 20px;}
.nr-product .content{font-size: 14px; line-height: 30px; color: #666;}
.nr-product .content img{max-width: 100%; margin:0 auto; display: block;}

.produclistfh {width:100%; height:50px; line-height:50px; background:#0099d6; font-size:18px; text-align:center; margin-top:50px; margin-bottom: 50px;}
.produclistfh a { color:#FFF}

.nybanner{width:100%;}
.nybanner img{max-width: 100%;}

.toppic {
  margin-top: 80px;
  width: 100%;
  height: 130px;
  background: url(../images/aboutbanner.jpg) no-repeat;
  background-size: 100% 100%;
}

.toppic-title-i {
  font-size: 36px;
  margin-right: 5px;
  vertical-align: sub;
}

.toppic-title-span {
  font-size: 26px;
}

.toppic-title p {
  font-size: 17px;
  padding-left: 30px;
  margin-top: -10px;
}

.toppic-title {
  color: #fff;
  padding-top: 20px;
}

.toppic-progress {
  padding: 8px 10px;
  border: 1px solid #fff;
  margin-top: 45px;
  border-radius: 7px;
}

.toppic-progress span {
  font-size: 14px;
  padding: 0 4px;
}

.toppic-progress span:hover {
  text-decoration: underline;
}
.part-title-mar {
    padding-top: 30px;
    padding-bottom: 25px;
}


.newsxl h3{text-align: center; line-height: 48px; font-size: 22px;}
.newsxl h6{    color: #999;
    font-size: 13px;
    font-style: italic; text-align: center;}

.newsxc img{display: block; margin: 0 auto;}
.newspage{margin-top: 20px; margin-bottom: 20px;}
.newspage .span1{float:left;}
.newspage .span2{float:right;}
@media only screen and (max-width:1024px) {
  .toppic-title {
    margin-left: 10px;
  }
  .toppic-progress {
    margin-right: 10px;
  }
}
@media only screen and (max-width:640px) {
  .toppic-title {
    padding-top: 40px;
  }
  .toppic-title-i {
    font-size: 26px;
  }
  .toppic-title-span {
    font-size: 18px;
  }
  .toppic-title p {
    font-size: 13px;
    padding-left: 23px;
  }
  .toppic-progress {
    padding: 4px 7px;
    margin-top: 50px;
    border-radius: 5px;
  }
  .toppic-progress span {
    font-size: 12px;
    padding: 0 3px;
  }
  .toppic-progress i {
    font-size: 13px;
  }
}